<template>
  <div id="app">
    <Row :gutter="24">
      <iCol span="12">
        <div>
          <div>
            <List header="vuex" border>
              <ListItem>Vuex 是一个专为 Vue.js 应用程序开发的 状态管理 模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.</ListItem>
              <ListItem>Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上</ListItem>
            </List>
          </div>
          <div style="height:24px"></div>
          <div>
            <List header="Vuex各个模块" border>
              <ListItem>state：用于数据的存储，是store中的唯一数据源</ListItem>
              <ListItem>getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算</ListItem>
              <ListItem>mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件</ListItem>
              <ListItem>actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作</ListItem>
              <ListItem>modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护</ListItem>
            </List>
          </div>
        </div>
      </iCol>
      <iCol span="1" style="color:white">1</iCol>
      <iCol span="11">
        <div style="height:24px"></div>
        <ChildA />
        <div style="height:24px"></div>
        <ChildB />
      </iCol>
    </Row>
  </div>
</template>
<script>
import ChildA from "./childA"; // 导入A组件
import ChildB from "./childB"; // 导入B组件
export default {
  name: "App",
  components: { ChildA, ChildB } // 注册A、B组件
};
</script>
<style scoped>
ul {
  margin-left: 24px;
}
</style>